<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>相书保险</title>
    <link rel="stylesheet" href="css/project.css">

    <script src="js/libs/jquery-3.0.0.min.js"></script>
    <script src="js/libs/jquery-weui.min.js"></script>
    <!-- 城市选择器 -->
    <script src="js/libs/city-picker.js"></script>
    <script src="js/libs/vue2.0.js"></script>
    <!-- 拖拽插件hammer.js http://hammerjs.github.io/ -->
    <script src="js/libs/hammer.min.js"></script>
    <!-- 全局js文件 -->
    <script src="js/project.js"></script>
    <style>
        body{padding: 30px 20px;background-color: rgba(0, 0, 0, 0.75);}

        /* 选择城市与学校 */
        .weui_dialog_bd .weui_input{color: #333;}

        /* 搜索结果 */
        .weui_dialog{overflow: visible;}
        .search_list{
            position: absolute;
            top:46px;
            left: 0;
            right: 0;
            z-index: 10;
            max-height: 195px;
            background-color: #fff;
            border-radius: 3px;
            box-shadow: 0 0 6px 0 rgba(0,0,0,.04), 0 2px 4px 0 rgba(0,0,0,.12);
            text-align: left;
            padding: 10px 15px;
            border: 1px solid #d3dce6;
            overflow: auto;
            transition: top .5s ease-out;
        }
        .search_list_item{  line-height: 30px;  color: #333;  white-space: nowrap;overflow: hidden;text-overflow: ellipsis;  }
        .search_list_item span{font-size: 12px;color: #999;}

        .weui_dialog{top: 15%;}
        @media screen and (max-height: 400px){
            .weui_dialog{top: 0;}
        }
        @media screen and (max-height: 300px){
            .weui_dialog{top: -100px;}
        }
    </style>
</head>
<body>
<div id="app" style="display: none;">
    <!-- 选择学校 -->
    <div>
        <div class="weui_mask weui_mask_visible"></div>
        <div class="weui_dialog weui_dialog_visible ">
            <div class="weui_dialog_hd" style="border-bottom: 0;">
                <div class="weui_dialog_title">选择城市与学校</div>
            </div>
            <div class="weui_dialog_bd weui_cells_access" style="padding-top: 0;margin-bottom: 20px;">
                <div class="weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">
                        <input class="weui_input " placeholder="请选择您所在城市" :value="provice+' '+city+' '+area" type="text" id='city-picker' >
                    </div>
                    <div class="weui_cell_ft"></div>
                </div>

                <div class="weui_cell weui_cell_select">
                    <div class="weui_cell_bd weui_cell_primary">
                        <select class="weui_select" name="select" v-model="type">
                            <option value="">请选择学校类型</option>
                            <option value="0">幼儿园</option>
                            <option value="1">小学</option>
                            <option value="2">初中</option>
                            <option value="3">高中</option>
                            <option value="4">大学</option>
                            <option value="5">职中</option>
                            <option value="6">工读</option>
                            <option value="7">特殊</option>
                        </select>
                    </div>
                </div>

                <div class="weui_cell" style="position: relative;overflow: visible;">
                    <div class="weui_cell_bd weui_cell_primary" >
                        <input class="weui_input" v-model="name"  @click="searchSchool"  placeholder="请选择您所在的学校" id="school-picker">
                    </div>
                    <div class="weui_cell_ft"></div>
                    <!-- 搜索结果 -->
                    <ul id="search_list" class="search_list" v-show="showSearchResult && searchList.length">
                        <!--<li class="search_list_item" v-for="school in searchList" @click="selectSchool(school)">{{school.name}}<span>({{school.address.replace(/\s/g,"")}})</span></li>-->
                        <li class="search_list_item" v-for="school in searchList" @click="selectSchool(school)">{{school.name}}</li>
                    </ul>
                </div>
            </div>
            <!-- <div class="weui_dialog_ft">
                 <a onclick="saveSchool()" class="weui_btn_dialog primary">确定</a>
             </div>-->
        </div>
    </div>
</div>

<script>
    var interval;
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                /* 学校信息 */
                provice:'广东省',
                city:'肇庆市',
                area:'四会市',
                type: '',
                // 学校名
                name: '',
                // 学校id
                id: '',
                addressAndType:{},
                /* 学校数据列表 */
                schoolList:[],
                /* 搜索结果 */
                searchList:[

                ],
                /* 是否显示搜索结果 */
                showSearchResult: false,
                // 是否从信息填写页面过来
                history: '',
            }
        },
        watch:{
            // 当城市变化时
            area: function () {
                vm.name = '';
                vm.type = '';
                vm.showSearchResult = false;
                vm.initSchoolList();
            },
            // 学校类型变化时
            type: function () {
                vm.name = '';
                vm.showSearchResult = false;
                vm.initSchoolList();
            },
            // 当搜索框的值改变时
            name: function (val) {
                clearInterval(interval);
                interval = setTimeout(function () {
                    vm.searchSchool();
                    console.log('搜索结果:',vm.searchList);
                },500);
            }
        },
        methods: {
            /* 查询学校列表 */
            initSchoolList: function () {
                if(this.area && this.type){
                    // 查询参数
                    var queryData = {
                        provice:vm.provice,
                        city:vm.city,
                        area:vm.area,
                        type: vm.type
                    };
                    // 查询地址
                    var url =  '/wego168-xsinsurance-wechat/school/listJson.jsp';
                    $.post(url, queryData,function (data) {
                        data = JSON.parse(data);
                        console.log(data);
                        if(data.errcode == 0){
//                            vm.searchSchool();
                            vm.schoolList = data.schoolList;
                        }else {
                            showInfo(data.errMsg);
                        }
                    })
                }
            },
            /* 搜索学校
             *  @param val  输入值[string]
             *  @param arr  搜索源Array[obj]
             *  @return     搜索结果Array[obj]
             * */
            searchSchool: function () {
                var val = vm.name;
                vm.showSearchResult = true;
                if(!val){
                    vm.searchList = vm.schoolList;
                    console.log(vm.searchList);
                }else {
                    vm.searchList = vm.schoolList.filter(function (item) {
                        return item.name.match(val) != null
                    })
                }
            },
            /* 选择学校 */
            selectSchool: function (school) {
                vm.name = school.name;
                vm.showSearchResult = false;
                store.setItem('school',school);
                /*if(this.history){
                    window.history.go(-1);
                }*/
                window.location = 'index.html';

            }
        },
        /* 初始化数据 */
        created: function () {
            /* 获取城市、学校类型、学校 */
            var school = store.getItem('school');

            this.history = getUrlParam('history');

            setTimeout(function () {
                /* 选择城市 */
                $("#city-picker").cityPicker({
                    onChange: function (e) {
                        vm.province = e.displayValue[0];
                        vm.city = e.displayValue[1];
                        vm.area = e.displayValue[2];
                    }
                });

                /* 给学校选择器绑定点击事件 */
                $("#school-picker").on('click', function () {
                    if(!vm.area){
                        $.toast('请先选择城市','text');
                    }else if(!vm.type){
                        $.toast('请先选择学校类型','text');
                    }
                });
                vm.initSchoolList();
            },400);
        }
    });


</script>

</body>
</html>